<template>
  <container>
    <div class="mb-20">
      <el-button type="primary" :icon="Plus" @click="showRolesDialog()">新增角色</el-button>
    </div>
    <el-table v-loading="loading" :data="roles" border>
      <el-table-column label="角色名称" fixed prop="name" width="160" />
      <el-table-column label="角色标识" prop="variable" />
      <el-table-column label="创建时间" prop="createTime" />
      <el-table-column label="更新时间" prop="updateTime" />
      <el-table-column label="是否是默认角色">
        <template #default="{ row }">
          <el-switch
            :loading="switchLoading"
            :model-value="row.isDefault"
            @change="changeBefore($event, row.id)"
            inline-prompt
            active-text="是"
            inactive-text="否" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template #default="{ row }">
          <el-button text type="primary" size="small" @click="showRolesDialog(row)">编辑</el-button>
          <el-button text type="danger" size="small" @click="_deleteRole(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-model:limit="roleParams.pageSize"
      v-model:page="roleParams.pages"
      :total="total"
      @pagination="_getRoles" />

    <el-dialog v-model="roleDialogVisible" header="新增角色" width="700px">
      <div class="dialog-content">
        <el-form :model="roleForm" ref="formRef" :rules="rules" label-width="100px">
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="roleForm.name" placeholder="请输入角色名称"></el-input>
          </el-form-item>
          <el-form-item label="角色标识" prop="variable">
            <el-input v-model="roleForm.variable" placeholder="请输入角色标识"></el-input>
          </el-form-item>
          <el-form-item label="设为默认角色">
            <el-switch v-model="roleForm.isDefault" inline-text on-text="是" off-text="否"></el-switch>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button plain @click="roleDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirm">{{ isEdit ? '确认修改' : '新增' }}</el-button>
      </template>
    </el-dialog>
  </container>
</template>

<script setup lang="ts">
import { getRoles, changeDefaultRole, addRole, deleteRole, updateRole } from '@/mocks/system';
import { onMounted, ref } from 'vue';
import { Plus } from '@icon-park/vue-next';
import container from '@/components/container';
import { ElMessage, ElMessageBox } from 'element-plus';

const { confirm: $confirm } = ElMessageBox;

const roles = ref([]);
const total = ref(0);
const roleParams = ref({
  pageSize: 10,
  pages: 1
});
const loading = ref(false);
const switchLoading = ref(false);
const roleDialogVisible = ref(false);
const roleForm = ref({
  name: '',
  variable: '',
  isDefault: false
});
const rules = ref({
  name: { required: true, message: '请输入角色名称', trigger: 'blur' },
  variable: [{ required: true, message: '请输入角色标识', trigger: 'blur' }]
});
const isEdit = ref(false);
const formRef = ref();

function refresh() {
  roleParams.value.pageSize = 10;
  roleParams.value.pages = 1;
  _getRoles(true);
}

function _getRoles(value) {
  loading.value = value;
  getRoles(roleParams.value).then((res) => {
    roles.value = res.data;
    total.value = res.total;
    loading.value = false;
  });
}
function changeBefore(isDefault, id) {
  switchLoading.value = true;
  return changeDefaultRole({ id, isDefault })
    .then((_) => {
      switchLoading.value = false;
      _getRoles(false);
    })
    .catch((err) => {
      switchLoading.value = false;
      ElMessage.error(err.msg);
    });
}
function showRolesDialog(row?) {
  if (row) {
    Object.keys(roleForm.value).forEach((key) => {
      roleForm.value[key] = row[key];
    });
    roleForm.value['id'] = row.id;
  }
  isEdit.value = !!row;
  roleDialogVisible.value = true;
}

function confirm() {
  formRef.value.validate((vald) => {
    if (!vald) return;
    if (isEdit.value) {
      _updateRole();
    } else {
      _addRoles();
    }
  });
}
function _addRoles() {
  addRole(roleForm.value).then((_) => {
    ElMessage.success('新增角色成功');
    roleDialogVisible.value = false;
    refresh();
  });
}
function _updateRole() {
  updateRole(roleForm.value)
    .then((_) => {
      ElMessage.success('修改角色信息成功');
      roleDialogVisible.value = false;
      refresh();
    })
    .catch((err) => {
      ElMessage.error(err.msg);
    });
}

function _deleteRole(id) {
  $confirm('确认是要删除该角色么？', 'warning').then((_) => {
    deleteRole(id)
      .then((_) => {
        ElMessage.success('删除角色成功');
        refresh();
      })
      .catch((err) => {
        ElMessage.error(err.msg);
      });
  });
}

onMounted(() => {
  _getRoles(true);
});
</script>

<style lang="scss" scoped>
.dialog-content {
  padding: 10px;
}
</style>
